<!--

    Copyright (c) 2019 Oracle and/or its affiliates. All rights reserved.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<html>
<meta charset="utf-8" />
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"
    integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw="
    crossorigin="anonymous"></script>
<link
    href="https://code.jquery.com/ui/1.11.4/themes/cupertino/jquery-ui.css"
    rel="stylesheet">
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
<script src="EmployeeController.js"></script>


<style>
html body {
    font-family: Arial, Helvetica, sans-serif
}

label, input {
    display: block;
    font-size: 80%;
}

input.text {
    margin-bottom: 12px;
    width: 95%;
    padding: .4em;
}

fieldset {
    padding: 0;
    border: 0;
    margin-top: 25px;
    font-size: 75%;
}

.container {
    width: 90%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
}

.peopleContent {
    flex-grow: 1;
}

.portrait {
    width: 120px;
}

.peopleItem {
    width: 350px;
    border: 1px solid #777777;
    background: #FAFAFA;
    margin: 3px;
    padding: 2px;
    display: flex;
}

.peopleTitle {
    width: 100%;
    background: #FAFAFA;
    margin: 3px;
    padding: 2px;
    display: flex;
}

#editDialog {
    display: none;
}

#addDialog {
    display: none;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #111;
}
</style>


<script id="employees_tpl" type="x-tmpl-mustache">
<div class="row">
    <div class="peopleItem col-sm-3" style="cursor: pointer">
        <div class="photos">
             <img src="nopic.png" style="width: 120px; height: 120px"></img>
        </div>
        <div class="peopleContent">
            <h4>{{firstName}} {{lastName}}</h4>
            {{title}} <br> <small> {{department}}</small>
        </div>
    </div>
</div>

</script>


<script id="detail_tpl" type="x-tmpl-mustache">
<div id="editForm" class="col-sm-5 col-md-offset-2">
    <div class="panel panel-info" class="click-element animate-show">
        <div class="panel-heading">
            <h3 class="panel-title">
                <div id="formTitle" style="padding: 10px">
                    Update Employee
                    <button class="btn btn-primary" id="delete"
                        type="button" onclick="deleteEmployee()"
                        style="float: right; position: relative; bottom: 9px;">
                        <span class="glyphicon glyphicon-trash"></span>
                        Delete
                    </button>
                </div>
            </h3>
        </div>
        <div class="panel-body">
            <form class="form-horizontal" name="form" novalidate>
                <input type="text" id="editId" value="{{id}}"
                    style="display: none;">
                <div class="photos">
                    <img src="nopic.png"
                        style="width: 120px; height: 120px"></img>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3"
                        for="editFirstName">First Name:</label>
                    <div class="col-xs-5">
                        <input type="text" id="editFirstName"
                            name="editFirstName"
                            value="{{firstName}}"
                            class="form-control" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3" for="lastName">Last
                        Name:</label>
                    <div class="col-xs-5">
                        <input type="text" id="editLastName"
                            name="editLastName"
                            value="{{lastName}}"
                            class="form-control" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3"
                        for="editEmail">Email:</label>
                    <div class="col-xs-5">
                        <input type="text" id="editEmail"
                            name="editEmail"
                            value="{{email}}"
                            class="form-control" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3"
                        for="editPhone">Phone:</label>
                    <div class="col-xs-5">
                        <input type="text" id="editPhone"
                            name="editPhone"
                            value="{{phone}}"
                            class="form-control" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3"
                        for="editBirthDate">Birthdate:</label>
                    <div class="col-xs-5">
                        <input type="text" id="editBirthDate"
                            name="editBirthDate"
                            value="{{birthDate}}"
                            class="form-control" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3"
                        for="editTitle">Title:</label>
                    <div class="col-xs-5">
                        <input type="text" id="editTitle"
                            name="editTitle"
                            value="{{title}}"
                            class="form-control" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3"
                        for="editDepartment">Department:</label>
                    <div class="col-xs-5">
                        <input type="text" id="editDepartment"
                            name="editDepartment"
                            value="{{department}}"
                            class="form-control" required>
                    </div>
                </div>
                <br> <br>
                <div style="text-align: center;">
                    <input type="button" tabindex="-1"
                        class="btn btn-default" value="Cancel"
                        onclick="loadEmployees()"> <input
                        id="saveButton" type="button" tabindex="-1"
                        class="btn btn-success" value="Save"
                        onclick="updateEmployee()">
                </div>
            </form>
        </div>
    </div>
</div>
</script>
</head>

<body onload="loadEmployees()">
    <h1>Cloud Employee App</h1>
    <ul>
        <li><a href="#" onclick="loadEmployees()">Home</a></li>
        <li><a href="#" onclick="showEmployeeForm()">New
                Employee</a></li>
    </ul>
    <nav>
        <div class="click-element animate-show" id="home">

            <h2>People</h2>
            <br>
            <form>

                <div class="col-xs-3">
                    <input class="form-control " type="text"
                        id="searchText">
                </div>
                <div class="col-xs-2">
                    <select id="searchType" class="form-control">
                        <option value="lastname">By last name</option>
                        <option value="department">By
                            department</option>
                        <option value="title">By title</option>
                    </select>
                </div>
                <div class="col-xs-1">
                    <button class="btn btn-success" id="searchButton"
                        type="button" onclick="search()">
                        <span class="glyphicon glyphicon-search"></span>
                        Search
                    </button>
                </div>
            </form>

        </div>
    </nav>
      <br>
    <br>
    <div id="people" class="container">LOADING...</div>
    <div id="notFound" class="alert alert-info col-sm-7"></div>
    <div id="detail"></div>
  
    <div class="col-sm-5 col-md-offset-2" id="employeeForm"
        style="display: none">
        <div class="panel panel-info "
            class="click-element animate-show">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <div style="padding: 10px">
                        <span id="formTitle">Add New Employee</span>
                        <button class="btn btn-primary"
                            id="deleteButton" type="button"
                            style="float: right; position: relative; bottom: 9px;">
                            <span class="glyphicon glyphicon-trash"></span>
                            Delete
                        </button>
                    </div>
                </h3>
            </div>

            <div class="panel-body">
                <form class="form-horizontal" name="form" novalidate>
                    <input type="text" id="id" value=""
                        style="display: none;">
                    <div class="photos">
                        <img src="nopic.png"
                            style="width: 120px; height: 120px"></img>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-xs-3"
                            for="firstName">First Name:</label>
                        <div class="col-xs-5">
                            <input type="text" id="firstName"
                                name="firstName" value=""
                                class="form-control" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-3"
                            for="lastName">Last Name:</label>
                        <div class="col-xs-5">
                            <input type="text" id="lastName"
                                name="lastName" value=""
                                class="form-control" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-3"
                            for="email">Email:</label>
                        <div class="col-xs-5">
                            <input type="text" id="email" name="email"
                                value="" class="form-control" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-3"
                            for="phone">Phone:</label>
                        <div class="col-xs-5">
                            <input type="text" id="phone" name="phone"
                                value="" class="form-control" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-3"
                            for="birthDate">Birthdate:</label>
                        <div class="col-xs-5">
                            <input type="text" id="birthDate"
                                name="birthDate" value=""
                                class="form-control" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-3"
                            for="title">Title:</label>
                        <div class="col-xs-5">
                            <input type="text" id="title" name="title"
                                value="" class="form-control" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-3"
                            for="department">Department:</label>
                        <div class="col-xs-5">
                            <input type="text" id="department"
                                name="department" value=""
                                class="form-control" required>
                        </div>
                    </div>
                    <br> <br>
                    <div style="text-align: center;">
                        <input type="button" tabindex="-1"
                            class="btn btn-default" value="Cancel"
                            onclick="loadEmployees()"> <input
                            type="button" tabindex="-1"
                            class="btn btn-success" value="Save"
                            onclick="save()">
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>
